<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document workspace</title>
</head>
<style>
	body{
		padding:0;
		overflow-y: hidden;
		overflow-x: hidden;
		background-color:#ffffff;
	}
	#image-wrap{
		padding: 10px 10px 0;
		background-image: linear-gradient(45deg,#e6e6e6 25%,transparent 0,transparent 75%,#e6e6e6 0,#e6e6e6),linear-gradient(45deg,#e6e6e6 25%,transparent 0,transparent 75%,#e6e6e6 0,#e6e6e6);
		background-position: 0 0,8px 8px;
    	background-size: 16px 16px;
	}
	#image-wrap,#media-wrap,#container,#pdf-wrap{
		position:absolute;
		left: 0;
		top:0;
		width:100%;
		height:100%;
		overflow: auto;
		box-sizing: border-box;
	}
	#container{
		overflow: hidden;
	}
	#media-wrap{
		padding:20px;
	}
	#media{
		display: block;
		margin:auto;
		max-width: 100%;
		max-height: 100%;
	}
	/*.scrollbar-override::-webkit-scrollbar {
		width: 13px;
		height: 10px;
		overflow: hidden;
		transition:all 3s linear;
	}
	.scrollbar-override::-webkit-scrollbar-thumb{
		transition:all 3s linear;
	}
	.scrollbar-override:hover::-webkit-scrollbar-thumb:hover{
		background-color: #bbb;
		transition:all 3s linear;
	}
	.scrollbar-override:hover::-webkit-scrollbar-thumb{
		background-color: #ccc;
		transition:all 3s linear;
	}*/
	
</style>
<body>
	<div id="container">

	</div>
	<div id="image-wrap" class="scrollbar-override" style="display:none">
		<img id="image" src="" alt="" >
	</div>
	<div id="media-wrap" class="scrollbar-override" style="display:none">
		<video id="media" src="" controls></video>
	</div>
	<div id="pdf-wrap" style="display:none;">
		<embed src="" id="pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="8">
	</div>
<script>	
	const { ipcRenderer } = require('electron');
	document.body.ondragover = () => {
      return false;
    }
    document.body.ondragleave = document.body.ondragend = () => {
      return false;
    }
    document.body.ondrop = (e) => {
      e.preventDefault()
	  //return false;
	  alert('drop code');
	  
	}
	document.body.onclick = (e)=>{
		ipcRenderer.sendToHost('click')
	}

	window.onresize=()=>{
		//alert('resize');
	}
	

	//dom节点
	var domNode = {
		container:document.getElementById('container'),

		image:document.getElementById('image'),
		imageWrap:document.getElementById('image-wrap'),

		pdf:document.getElementById('pdf'),
		pdfWrap:document.getElementById('pdf-wrap'),

		media:document.getElementById('media'),
		mediaWrap:document.getElementById('media-wrap'),
	}


	//打开图片
	function openImage(path){
		//alert('path:path:'+path);
		domNode.image.src = path;
		domNode.imageWrap.style.display = 'block';
		domNode.container.style.display = 'none';
		domNode.mediaWrap.style.display = 'none';
		domNode.media.src = '';
		domNode.pdfWrap.style.display = 'none';
	}

	//打开多媒体文件
	function openMedia(path){
		domNode.media.src = path;
		domNode.mediaWrap.style.display = 'block';
		domNode.container.style.display = 'none';
		domNode.imageWrap.style.display = 'none';
		domNode.pdfWrap.style.display = 'none';
	}

	//
	function openPdf(path){
		domNode.pdf.src = path;
		domNode.mediaWrap.style.display = 'none';
		domNode.media.src = '';
		domNode.container.style.display = 'none';
		domNode.imageWrap.style.display = 'none';
		domNode.pdfWrap.style.display = 'block';
	}
	
	//打开文本件
	function openFile(str,delimiter){
		domNode.mediaWrap.style.display = 'none';
		domNode.media.src = '';
		domNode.container.style.display = 'block';
		domNode.imageWrap.style.display = 'none';
		domNode.pdfWrap.style.display = 'none';
		try{
			editor.setValue(decodeURI(str));
			editor.layout();
		}catch(e){
			console.log(e);
		}
	}

	function stop(){
		domNode.mediaWrap.style.display = 'none';
		domNode.media.src = '';
		domNode.container.style.display = 'none';
		domNode.imageWrap.style.display = 'none';
		domNode.pdfWrap.style.display = 'none';
	}

	//
	function getCode(){
		return editor.getValue();
	}

	ipcRenderer.on('setImage',(arg,path)=>{
		openImage(path);
	})
	ipcRenderer.on('setMedia',(arg,path)=>{
		openMedia(path);
	})

	
	</script>
</body>
</html>